<template>
  <div class="w-full">
    <!-- 顶部数据卡片 -->
    <div class="home-header bg-white p-3 rounded-lg flex gap-4">
      <el-card class="w-full index-card-one">
        <div class="card-content">
          <div class="text-lg">门诊量</div>
          <div class="text-2xl font-bold my-2">1,268人</div>
          <div class="flex gap-2 text-sm">
            <span>中医占比</span>
            <div class="font-medium">76.5%</div>
          </div>
        </div>
      </el-card>
      <el-card class="w-full index-card-two">
        <div class="card-content">
          <div class="text-lg">针灸推拿</div>
          <div class="text-2xl font-bold my-2">386人</div>
          <div class="flex gap-2 text-sm">
            <span>预约率</span>
            <div class="font-medium">92.3%</div>
          </div>
        </div>
      </el-card>
      <el-card class="w-full index-card-three">
        <div class="card-content">
          <div class="text-lg">中药处方</div>
          <div class="text-2xl font-bold my-2">892张</div>
          <div class="flex gap-2 text-sm">
            <span>代煎率</span>
            <div class="font-medium">68.5%</div>
          </div>
        </div>
      </el-card>
      <el-card class="w-full index-card-four">
        <div class="card-content">
          <div class="text-lg">特色治疗</div>
          <div class="text-2xl font-bold my-2">235人</div>
          <div class="flex gap-2 text-sm">
            <span>治愈率</span>
            <div class="font-medium">89.6%</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="mt-4 flex gap-4">
      <!-- 就诊趋势图 -->
      <el-card class="w-2/3">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">中医诊疗趋势分析</span>
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button :value="'week'">本周</el-radio-button>
              <el-radio-button :value="'month'">本月</el-radio-button>
              <el-radio-button :value="'year'">全年</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div id="trendChart" ref="trendChartRef" class="chart-container"></div>
      </el-card>

      <!-- 科室分布图 -->
      <el-card class="w-1/3">
        <template #header>
          <div class="font-bold">中医科室就诊分布</div>
        </template>
        <div id="departmentChart" class="chart-container"></div>
      </el-card>
    </div>

    <!-- 实时数据表格 -->
    <el-card class="mt-4">
      <template #header>
        <div class="font-bold">特色治疗动态</div>
      </template>
      <el-table :data="tableData" stripe>
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="department" label="科室" width="120" />
        <el-table-column prop="doctor" label="医师" width="120" />
        <el-table-column prop="treatment" label="治疗方式" width="120" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import VChart from '@visactor/vchart'

const timeRange = ref('week')
let trendChart = null
let departmentChart = null

// 按时间范围组织数据
const chartData = {
  week: [
    { date: '周一', 中医门诊: 520, 针灸推拿: 220, 其他: 180 },
    { date: '周二', 中医门诊: 632, 针灸推拿: 242, 其他: 190 },
    { date: '周三', 中医门诊: 601, 针灸推拿: 201, 其他: 170 },
    { date: '周四', 中医门诊: 634, 针灸推拿: 234, 其他: 185 },
    { date: '周五', 中医门诊: 790, 针灸推拿: 290, 其他: 210 },
    { date: '周六', 中医门诊: 830, 针灸推拿: 230, 其他: 195 },
    { date: '周日', 中医门诊: 720, 针灸推拿: 220, 其他: 180 }
  ],
  month: [
    { date: '1日', 中医门诊: 620, 针灸推拿: 320, 其他: 280 },
    { date: '3日', 中医门诊: 732, 针灸推拿: 342, 其他: 290 },
    { date: '6日', 中医门诊: 701, 针灸推拿: 301, 其他: 270 },
    { date: '9日', 中医门诊: 734, 针灸推拿: 334, 其他: 285 },
    { date: '12日', 中医门诊: 890, 针灸推拿: 390, 其他: 310 },
    { date: '15日', 中医门诊: 930, 针灸推拿: 330, 其他: 295 },
    { date: '18日', 中医门诊: 820, 针灸推拿: 320, 其他: 280 },
    { date: '21日', 中医门诊: 845, 针灸推拿: 335, 其他: 288 },
    { date: '24日', 中医门诊: 878, 针灸推拿: 345, 其他: 292 },
    { date: '27日', 中医门诊: 902, 针灸推拿: 352, 其他: 298 },
    { date: '29日', 中医门诊: 865, 针灸推拿: 338, 其他: 285 },
    { date: '31日', 中医门诊: 825, 针灸推拿: 328, 其他: 275 }
  ],
  year: [
    { date: '1月', 中医门诊: 3520, 针灸推拿: 1220, 其他: 980 },
    { date: '2月', 中医门诊: 3832, 针灸推拿: 1342, 其他: 1090 },
    { date: '3月', 中医门诊: 4632, 针灸推拿: 1542, 其他: 1190 },
    { date: '4月', 中医门诊: 5201, 针灸推拿: 1901, 其他: 1270 },
    { date: '5月', 中医门诊: 5601, 针灸推拿: 2201, 其他: 1470 },
    { date: '6月', 中医门诊: 5234, 针灸推拿: 2034, 其他: 1385 },
    { date: '7月', 中医门诊: 4834, 针灸推拿: 1934, 其他: 1385 },
    { date: '8月', 中医门诊: 5390, 针灸推拿: 2090, 其他: 1410 },
    { date: '9月', 中医门诊: 5790, 针灸推拿: 2190, 其他: 1510 },
    { date: '10月', 中医门诊: 5230, 针灸推拿: 1930, 其他: 1395 },
    { date: '11月', 中医门诊: 4930, 针灸推拿: 1830, 其他: 1295 },
    { date: '12月', 中医门诊: 5120, 针灸推拿: 1920, 其他: 1380 }
  ]
}

// 抽离科室分布数据
const departmentData = [
  { department: '脾胃病科', value: 548 },
  { department: '针灸科', value: 435 },
  { department: '推拿科', value: 380 },
  { department: '肝病科', value: 284 },
  { department: '心病科', value: 220 },
  { department: '其他', value: 180 }
]

// 修改趋势图配置函数
const createTrendSpec = () => {
  // 首先转换数据格式
  const transformedData = chartData[timeRange.value].reduce((acc, item) => {
    acc.push(
      { date: item.date, value: item.中医门诊, type: '中医门诊' },
      { date: item.date, value: item.针灸推拿, type: '针灸推拿' },
      { date: item.date, value: item.其他, type: '其他' }
    )
    return acc
  }, [])

  return {
    type: 'line',
    data: [{
      id: 'trendData',
      values: transformedData
    }],
    title: {
      visible: true,
      text: `中医诊疗趋势分析(${timeRange.value === 'week' ? '本周' : 
            timeRange.value === 'month' ? '本月' : '全年'})`
    },
    xField: 'date',
    yField: 'value',
    seriesField: 'type', // 使用 type 字段区分不同的折线
    legends: {
      visible: true,
      position: 'top',
      orient: 'horizontal',
      padding: [0, 0, 20, 0]
    },
    line: {
      style: {
        lineWidth: 2,
        smooth: true
      }
    },
    color: ['#1890ff', '#2fc25b', '#facc14'],
    point: {
      visible: true,
      style: {
        size: 4
      }
    },
    animation: {
      duration: 1000,
      easing: 'cubicOut'
    },
    tooltip: {
      visible: true,
      enterable: true
    },
    axes: [{
      orient: 'left',
      title: {
        visible: true,
        text: '就诊人数'
      },
      grid: {
        visible: true,
        style: {
          stroke: '#f0f0f0',
          lineWidth: 1
        }
      }
    }, {
      orient: 'bottom',
      label: {
        visible: true,
        autoRotate: timeRange.value === 'month',
        angle: timeRange.value === 'month' ? 45 : 0
      }
    }],
    crosshair: {
      visible: true
    }
  }
}

// 创建科室分布图配置函数
const createDepartmentSpec = () => ({
  type: 'pie',
  data: [{
    id: 'departmentData',
    values: departmentData
  }],
  title: {
    visible: true,
    text: '科室就诊分布'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true,
    type: 'outer'
  },
  tooltip: {
    visible: true,
    mark: {
      content: [
        {
          key: '科室',
          value: datum => datum.department
        },
        {
          key: '人数',
          value: datum => datum.value + '人'
        }
      ]
    }
  },
  valueField: 'value',
  categoryField: 'department',
  radius: 0.8,
  innerRadius: 0.5,
  animation: true
})

// 初始化图表函数
const initChart = (containerId, createSpec) => {
  const container = document.getElementById(containerId)
  if (container) {
    const chart = new VChart(createSpec(), {
      dom: container
    })
    chart.renderAsync()
    return chart
  }
  return null
}

// 监听时间范围变化
watch(timeRange, (newValue) => {
  if (trendChart) {
    // 更新图表数据和标题
    trendChart.updateSpec(createTrendSpec())
    trendChart.renderAsync()
  }
})

onMounted(() => {
  // 使用 requestAnimationFrame 确保 DOM 已渲染
  requestAnimationFrame(() => {
    try {
      trendChart = initChart('trendChart', createTrendSpec)
      departmentChart = initChart('departmentChart', createDepartmentSpec)
    } catch (error) {
      console.error('图表初始化错误:', error)
    }
  })
})

// onUnmounted(() => {
//   // 清理图表实例
//   [trendChart, departmentChart].forEach(chart => {
//     chart?.dispose()
//   })
// })

// 表格数据
const tableData = ref([
  {
    time: '2024-01-18 09:30',
    department: '针灸科',
    doctor: '张医师',
    treatment: '针灸治疗',
    status: '治疗中'
  },
  {
    time: '2024-01-18 10:00',
    department: '推拿科',
    doctor: '王医师',
    treatment: '推拿理疗',
    status: '待治疗'
  },
  {
    time: '2024-01-18 10:30',
    department: '脾胃病科',
    doctor: '李医师',
    treatment: '中药调理',
    status: '已完成'
  }
])

// 状态标签类型
const getStatusType = (status) => {
  const types = {
    '治疗中': 'warning',
    '待治疗': 'info',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return types[status] || 'info'
}
</script>

<style scoped>
.card-content {
  @apply flex flex-col h-full;
}

.index-card-one {
  background-color: var(--el-color-primary);
  color: var(--el-color-white);
  transition: transform 0.3s;
}

.index-card-two {
  background-color: var(--el-color-success);
  color: var(--el-color-white);
  transition: transform 0.3s;
}

.index-card-three {
  background-color: var(--el-color-warning);
  color: var(--el-color-white);
  transition: transform 0.3s;
}

.index-card-four {
  background-color: var(--el-color-danger);
  color: var(--el-color-white);
  transition: transform 0.3s;
}

.el-card:hover {
  transform: translateY(-5px);
}

.chart-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
</style>


